<template>
    <div class="section-header text-center">
        <h2>What students are saying</h2>
        <p class="style2">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. officia
            consequat duis enim velit mollit. Exercitation</p>
    </div>
    <div class="testimonial__wrapper">
        <SwiperSlide :dataList="testimonials" :breakpoints="breakpoints" :loop="true" :speed="speed"
            :pagination="pagination" :grabCursor="grabCursor">
            <template #content="{ item }">
                <div class="swiper-slide">
                    <TestimonialCard :details="item" />
                </div>
            </template>
            <template v-slot:pagination>
                <div class="slider__pagination-3 mt-5 py-2 text-center"></div>
            </template>
        </SwiperSlide>
        <div class="testimonial__shape">
            <span class="testimonial__shape-item"><img src="/images/testimonial/home2/1.png" alt="shpae"></span>
            <span class="testimonial__shape-item"><img src="/images/testimonial/home2/2.png" alt="shpae"></span>
        </div>
    </div>
</template>

<script>
import TestimonialCard from '@/components/partials/TestimonialCard.vue'
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
export default {
    components: { SwiperSlide, TestimonialCard },
    props: {
        testimonials: {
            type: Array,
            required: true,
            default: () => []
        },
    },

    data() {
        return {
            spaceBetween: 24,
            grabCursor: true,
            loop: true,
            breakpoints: {
                576: {
                    slidesPerView: 1,
                },
                768: {
                    slidesPerView: 2,
                },
                992: {
                    slidesPerView: 2,
                    spaceBetween: 15,
                },
                1400: {
                    slidesPerView: 2,
                    spaceBetween: 25,
                }
            },
            speed: 3000,
            pagination: {
                el: ".slider__pagination-3",
                clickable: true
            },
        }
    },
}
</script>

<style></style>